<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="main.css">
    <!-- <style>
       /* css reset */
        #div1{
            background: #A06F6F;
        }
        body{
            margin: 0;

        }
        h1{
            margin: 0;
        }
    </style> -->
</head>
<body>
    <header>
        <nav>
            <ul>
                <li class="logo">
                        <a href="http://">豆豆的家</a>
                </li>
                <li><a href="#">链接1</a></li>
                <li><a href="http://">链接1</a></li>
                <li><a href="http://">链接1</a></li>
                <li><a href="http://">链接1</a></li>
                <li><a href="http://">链接</a></li>
            </ul>
        </nav>
        <div id="banner">
            <div class="inner">
                <h1>豆豆</h1>
                <div class="hr">
                </div>
                <p  class="sub-heading">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat suscipit velit ex.</p>
                <button>来我家</button>
                <div class="more">更多</div>
            </div>
        </div>
    </header>
    <div class="content">
       <section class="green-section">
           <div class="sub-title">
                <h2>一个标题</h2>
                <div class="hr"></div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat suscipit velit ex.</p>
                <div class="icon-group">
                    <span class="icon">item1</span>
                    <span class="icon">item2</span>
                    <span class="icon">item3</span>
                </div>
           </div>
           
          
        </section>
       <section class="gray-section">
           <div class="article-preview">
               <div class="img-section">
                    <img src="img/pic01.jpg" alt="">
               </div>
               <div class="text-section">
                    <h2>second title</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adi</p>
               </div>
           </div>
       </section>
       <section class="purple-section"></section>
    </div>
    <footer>
        <ul>
            <li>itme1</li>
            <li>itme2</li>
            <li>itme3</li>
            <li>itme4</li>
            <li>itme5</li>
        </ul>
        <div class="copy">
            &copy 王小窝
        </div>
    </footer>
</body>
</html>